<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/static/js/dev.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/static/plugin/jo/joUI.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/static/plugin/layui-2.4.3/css/layui.css" rel="stylesheet"/>
    <!--ztree-->
    <link href="/static/plugin/zTree/css/metroStyle/metroStyle.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>
    <title>收件箱</title>
</head>
<body class="skin-default">

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <!--视图块-->
            <div class="container-fluid card">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <!--检索栏-->
                        <form class="form-inline search-bar" id="pageForm">
                            <div class="form-group">
                                <label class="control-label">发件时间：&nbsp;</label>
                                <div class="input-group">
                                    <input v-model="sendTime" type="text" name="sendTime" id="sendTime"
                                           class="form-control">
                                    <span class="input-group-addon" style="border-width: 1px 0px;">~</span>
                                    <input v-model="sendTime2" type="text" name="sendTime2" id="sendTime2"
                                           class="form-control">
                                </div>
                            </div>

                            <button type="button" class="btn btn-primary" onclick="joView.select()"><i
                                    class="fa fa-search" aria-hidden="true"></i>&nbsp;查询
                            </button>
                        </form>
                        <!--/检索栏-->
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <!--按钮栏-->
                        <div class="form-group button-bar">
                            <!--                            <button isShow="" type="button" class="btn btn-primary" onclick="joView.add()">-->
                            <!--                                <i class="fa fa-plus" aria-hidden="true"></i>&nbsp;新增-->
                            <!--                            </button>-->
                            <!--                            <button type="button" class="btn btn-danger" onclick="joView.del()">-->
                            <!--                                <i class="fa fa-trash-o" aria-hidden="true"></i>&nbsp;删除-->
                            <!--                            </button>-->
                            <button isShow="" type="button" class="btn btn-primary" onclick="setRead()">
                                <i class="fa fa-envelope-open" aria-hidden="true"></i>&nbsp;设为已读
                            </button>
                            <button type="button" class="btn btn-warning" onclick="window.location.reload()">
                                <i class="fa fa-refresh" aria-hidden="true"></i>&nbsp;刷新
                            </button>
                        </div>
                        <!--/按钮栏-->
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <div class="table-bar">
                            <!--grid-->
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover" id="mainList"
                                       dataUrl="/msg/siteLetterReceive/getUserLetterPage"
                                       deleteUrl="/msg/siteLetter/delete"
                                       formUrl="/page/msg/siteLetterForm.html">
                                    <col field="letterTitle" title="标题" width="50%" align="" event="click"/>
                                    <col field="senderName" title="发件人" width="15%" align=""/>

                                    <!--                                    <col field="receiverTypeShow" title="收信人" width="20%" align=""/>-->
                                    <!--                                    <col field="stateShow" title="状态" width="10%" align=""/>-->
                                    <col field="[=jo.formatTime('{sendTime}')]" title="发件时间" width="15%" align=""
                                         order="createTime"/>
                                    <col field="readStatusShow" title="状态" width="15%" align=""/>
                                </table>
                            </div>
                            <!--/grid-->

                            <!--分页条-->
                            <div class="page-bar" gridId="mainList">

                            </div>
                            <!--/分页条-->
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--bootstrap-->
<script src="/static/plugin/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--layui-->
<script src="/static/plugin/layui-2.4.3/layui.all.js"></script>
<!--ztree-->
<script src="/static/plugin/zTree/js/jquery.ztree.all.js"></script>
<!--vue-->
<script src="/static/plugin/vue/v3/vue.global.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<script type="text/javascript">

    //信件状态
    const stateEnum = {
        NO: {id: 10, name: '未发送', label: 'label-info'},
        YES: {id: 20, name: '已发送', label: 'label-success'}
        , items: enumItems
        , of: enumOf
        , labelHtml: enumLabelHtml
    };
    //收信人类型
    const receiverTypeEnum = {
        USER: {id: 10, name: '单用户', label: 'label-info'},
        ALL: {id: 20, name: '全体用户', label: 'label-success'}
        , items: enumItems
        , of: enumOf
        , labelHtml: enumLabelHtml
    };
    //发送人类型
    const senderTypeEnum = {
        USER: {id: 10, name: '普通用户', label: 'label-info'},
        ALL: {id: 20, name: '系统', label: 'label-primary'}
        , items: enumItems
        , of: enumOf
        , labelHtml: enumLabelHtml
    };
    //阅读类型
    const readStatusEnum = {
        USER: {id: 10, name: '未读', label: 'label-warning'},
        ALL: {id: 20, name: '已读', label: 'label-success'}
        , items: enumItems
        , of: enumOf
        , labelHtml: enumLabelHtml
    };
    $(function () {
        // senderTypeChange();
        // receiverTypeChange();
        joView.init({grid: $("#mainList"), PKName: "id"});//初始化页面
    });
    //表格渲染时行处理,参数1为当前行的数据对象,参数2为当前行的索引值(最小为0)
    joView.handleItem = function (oItem, iIndex) {
        oItem.stateShow = stateEnum.labelHtml(oItem.state);
        oItem.senderTypeShow = senderTypeEnum.labelHtml(oItem.senderType);
        oItem.receiverTypeShow = receiverTypeEnum.labelHtml(oItem.receiverType);

        oItem.senderNameShow = oItem.senderTypeShow + ' ' + oItem.senderName;

        if (receiverTypeEnum.USER.id == oItem.receiverType) {
            oItem.receiverTypeShow = oItem.receiverTypeShow + ' ' + oItem.receiver;
        }
        oItem.readStatusShow = readStatusEnum.labelHtml(oItem.readStatus);
        // if (oItem.readStatus == 10) {
        //     oItem.readStatusShow = htmlWrap4Label('未读', 'label-warning');
        // } else if (oItem.readStatus == 20) {
        //     oItem.readStatusShow = htmlWrap4Label('已读', 'label-success');
        // }
    };
    //表格渲染完成后的回调,参数为表格数据(数组对象)
    joView.setGridDataAfter = function (oList) {

    };
    /* 关于joView更多回调函数和配置参数可查看jo-page-view.js */

    // 设为已读
    function setRead(){
        var ids = jo.getCheckBoxValue('id');
        if (!ids) {
            jo.showTipsMsg('请选择待设置信息');
            return;
        }
        jo.confirm('您确定设为已读?', function (idx) {
            jo.close(idx);
            jo.postAjax('/msg/siteLetterReceive/readStatus', {ids:ids}, function (json) {
                if (json && json.code == 0) {
                    jo.showSuccessMsg('操作成功~');
                    joView.reloadCurrentPage();
                } else {
                    jo.showErrorMsg(jo.getDefVal(json.info, '操作失败!'));
                }
            }, true);
        });
    }

    var vm = Vue.createApp({
        data() {
            return {
                senderType: ''
                , sender: ''
                , receiverType: ''
                , receiver: ''
                , state: ''
                , sendTime: ''
                , sendTime2: ''
            };
        }
        , computed: {
            showSender() {
                return this.senderType == 20;
            }
            , showReceiver() {
                return this.receiverType == 10;
            }
        }
        , mounted() {
            console.info('mounted');
            layui.laydate.render({
                elem: '#sendTime' //注册日期控件
            });
            layui.laydate.render({
                elem: '#sendTime2' //注册日期控件
            });
        }
    }).mount('#pageForm');

</script>
</body>
</html>
